<template>
  <div class="history-detail" v-nores="noRes" v-loading="loading">
    <div
      class="song_item"
      v-for="(item, index) in songs"
      :key="item.id"
      @click="selectSong(item, index)"
    >
      <p>{{ item.name }}</p>
      <div class="singer">
        <span>{{ item.singer }}</span>
        <span class="item_album">{{ item.album }}</span>
      </div>
      <van-icon name="cross" size="14px" @click.stop="deleteItem(item)" />
    </div>
  </div>
</template>
<script>
import { Toast, Dialog } from 'vant'
import { mapActions } from 'vuex'

export default {
  name: 'albumDetail',
  props: {
    songs: {
      type: Array,
      default: () => []
    },
    confirmTitle: {
      type: String,
      default: '是否删除该播放记录?'
    }
  },
  data() {
    return {
      history: {},
      loading: false
    }
  },
  watch: {
    songs(newVAl, old) {
      console.log('newVAl', newVAl)
    }
  },
  computed: {
    title() {
      return this.history.name || this.history.title
    },
    backImg() {
      return this.history.pic
    },
    noRes() {
      return !this.loading && this.songs.length === 0
    },
    pad() {
      return this.$store.state.playlist.length > 0 ? '60px' : '0'
    }
  },
  methods: {
    ...mapActions(['selectPlay', 'randomPlay', 'setPlayHistory']),
    deleteItem(item) {
      Dialog.confirm({
        title: this.confirmTitle
      }).then(() => {
        this.setPlayHistory({
          song: item,
          type: 'del'
        })
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    selectSong(item, index) {
      this.selectPlay({
        list: this.songs,
        index
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.history-detail {
  width: 100%;
  // height: 100%;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 20px 20px;
  .song_item {
    height: 64px;
    width: 100%;
    padding: 5px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    p {
      color: #fff;
    }
    .singer {
      margin-top: 10px;
      span {
        color: rgba(255, 255, 255, 0.3);
      }
      .item_album {
        display: inline-block;
        margin-left: 8px;
        max-width: 225px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    .van-icon {
      position: absolute;
      padding: 20px 5px;
      right: 0;
      top: 5px;
      font-size: $font-size-medium;
      color: $color-text-d;
    }
  }
}
</style>
